<template>
  <div>
    <div class="gva-search-box">
      <!-- 搜索框区域 -->
    </div>
    <div class="gva-table-box">
      <div class="gva-btn-list">
        <el-button
            type="primary"
            icon="plus"
            @click="openDialog('addApi')"
        >
          新增
        </el-button>
      </div>
      <el-table
          :data="tableData"
          @sort-change="sortChange"
          @selection-change="handleSelectionChange"
      >

        <el-table-column
            align="left"
            label="服务器名称"
            min-width="150"
            prop="nodeName"
            sortable="custom"
        />
        <el-table-column
            align="left"
            label="服务IP"
            min-width="150"
            prop="nodeAddress"
            sortable="custom"
        />

        <el-table-column
            align="left"
            fixed="right"
            label="运行状况"
            width="200"
        >
          <template #default="scope">
            <el-button
                type="primary"
                link
                @click="handleRunningStatus(scope.row)"
            >
              详情
            </el-button>
          </template>
        </el-table-column>




      </el-table>
      <div class="gva-pagination">
        <el-pagination
            :current-page="page"
            :page-size="pageSize"
            :page-sizes="[10, 30, 50, 100]"
            :total="total"
            layout="total, sizes, prev, pager, next, jumper"
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
        />
      </div>
    </div>
    <!-- 新增服务器的弹窗 -->
    <el-drawer
     v-model="drawerVisible"
     title="新增服务器"
     direction="rtl"
     :size="drawerSize"
     @close="resetForm"
   >
     <el-form :model="form" label-width="120px">
       <el-form-item label="服务器名称">
         <el-input v-model="form.nodeName" placeholder="请输入服务器名称" />
       </el-form-item>
       <el-form-item label="服务IP">
         <el-input v-model="form.nodeAddress" placeholder="请输入服务IP" />
       </el-form-item>
       <!-- 根据目录添加其他字段 -->
       <!-- ... 其他表单项 ... -->
     </el-form>
     <template #footer>
        <div style="text-align: right;">
         <el-button @click="drawerVisible = false">取消</el-button>
         <el-button type="primary" @click="submitForm">确定</el-button>
       </div>
     </template>
   </el-drawer>

  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessageBox, ElMessage } from 'element-plus'
import {getNodeMonitor} from '@/api/node'
const router = useRouter()

const page = ref(1)
const total = ref(0)
const pageSize = ref(10)
const tableData = ref([
  { nodeId: '001', nodeName: '节点1', nodeAddress: '102.112.11.21', manager: '张三', state: '正常' },
  { nodeId: '002', nodeName: '节点2', nodeAddress: '102.112.11.21', manager: '张三', state: '正常' },
  { nodeId: '003', nodeName: '节点3', nodeAddress: '102.112.11.21', manager: '张三', state: '正常' },
  { nodeId: '004', nodeName: '节点4', nodeAddress: '102.112.11.21', manager: '张三', state: '正常' },
  { nodeId: '005', nodeName: '节点5', nodeAddress: '102.112.11.21', manager: '张三', state: '正常' },
  { nodeId: '006', nodeName: '节点6', nodeAddress: '102.112.11.21', manager: '张三', state: '正常' },
])
const searchInfo = ref({})

const getTableData = async () => {
  try {
    const response = await getNodeMonitor()
    if (response.data.code === 0) {
      tableData.value = response.data.data
    } else {
      ElMessage.error('获取数据失败')
    }
  } catch (error) {
    ElMessage.error('请求失败')
    console.error(error)
  }
};

const handleSizeChange = (val) => {
  pageSize.value = val
  getTableData()
}

const handleCurrentChange = (val) => {
  page.value = val
  getTableData()
}

const sortChange = ({ prop, order }) => {
  if (prop) {
    searchInfo.value.orderKey = prop
    searchInfo.value.desc = order === 'descending'
  }
  getTableData()
}

const handleSelectionChange = (val) => {
  apis.value = val
}

const deleteApiFunc = async(row) => {
  ElMessageBox.confirm('此操作将永久删除该节点, 是否继续?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    tableData.value = tableData.value.filter(item => item.nodeId !== row.nodeId)
    ElMessage({
      type: 'success',
      message: '删除成功!'
    })
  })
}



const drawerVisible = ref(false)
const dialogTitle = ref('')
const form = ref({
 nodeName: '',
 nodeAddress: '',
 // 根据目录添加其他字段
 // ... 其他表单项 ...
})

const openDialog = (type) => {
 if (type === 'addNode') {
   dialogTitle.value = '新增节点'
   form.value = { // 重置表单
     nodeName: '',
     nodeAddress: '',
     // 根据目录添加其他字段
     // ... 其他表单项 ...
   }
 }
 drawerVisible.value = true
}

const resetForm = () => {
 form.value = {
   nodeName: '',
   nodeAddress: '',
   // 根据目录添加其他字段
   // ... 其他表单项 ...
 }
}

const submitForm = () => {
 // 这里是提交表单的逻辑
 // 可以是添加新节点到tableData或其他操作
 // 示例：
 if (form.value.nodeName && form.value.nodeAddress) {
   // 假设我们有一个添加节点的函数
   addNode(form.value)
   dialogVisible.value = false
   ElMessage.success('新增节点成功')
 } else {
   ElMessage.error('请填写完整信息')
 }
}

const addNode = (node) => {
 // 这里仅作为示例，实际操作可能需要调用API
 tableData.value.push(node)
}





const runningStatusDialogVisible = ref(false)
const runningStatus = ref({
 processName: '',
 startTime: '',
 threadCount: '',
 processState: '',
 cpuUsage: '',
 memoryUsage: '',
 memoryUsed: ''
})

const handleRunningStatus = (row) => {
// 假设运行状况详情页面的路由是 /node/runstate
router.push('/node/runstate')
}


</script>

<style scoped lang="scss">
.gva-search-box {
  margin-bottom: 20px;
}

.gva-table-box {
  margin-bottom: 20px;
}

.gva-btn-list {
  margin-bottom: 10px;
}

.gva-pagination {
  margin-top: 20px;
}
</style>
